import React, { useState } from "react";
import { Navigate } from "react-router-dom";
import { Radio } from "antd";  // 添加 Radio 导入
import { useGlobalContext } from "../../context/GlobalContext";
import IconLogo from "../../assets/logo.svg";
import IconSearch from "../../assets/search.svg";
import {
  HistoryChats,
  NavBottomArea,
  InputBar,
  ChatItem,
} from "../../components";
import "./index.css";

export const ChatPage = () => {
  const { user, question, chatContent, setChatContent } = useGlobalContext();
  const [selectedModel, setSelectedModel] = useState("doubao");

  // 添加滚动到底部的函数
  const scrollToBottom = () => {
    const chatContainer = document.querySelector(".chat-container");
    if (chatContainer) {
      chatContainer.scrollTop = chatContainer.scrollHeight;
    }
  };

  // 使用 useEffect 监听 chatContent 的变化
  React.useEffect(() => {
    if (chatContent.length > 0) {
      setTimeout(scrollToBottom, 100);
    }
  }, [chatContent]);

  // 修改新建对话的处理函数
  const handleNewChat = () => {
    // 清空对话内容
    setChatContent([]);
  
    // 触发历史记录刷新
    const event = new CustomEvent('refreshHistory');
    window.dispatchEvent(event);
  };

  // 如果用户未登录，重定向到登录页
  if (!user) {
    return <Navigate to="/login" replace />;
  }

  // 添加搜索事件处理
  const handleSearchClick = () => {
    const event = new CustomEvent("toggleSearch");
    window.dispatchEvent(event);
  };

  return (
    <div className="chat-page">
      <div className="nav">
        <div className="nav-inner">
          <img className="logo" src={IconLogo} alt="AI魔方" />
          <div className="new-chat">
            <button type="new" onClick={handleNewChat}>
              +&nbsp;新建对话
            </button>
            <button type="search" onClick={handleSearchClick}>
              <img className="search-icon" src={IconSearch} alt="搜索" />
            </button>
          </div>
          <HistoryChats />
          <NavBottomArea />
        </div>
      </div>
      <div className="content">
        <div className="content-inner">
          <div className="chat-container">
            {chatContent.length === 0 ? (
              <div className="welcome-content">
                <div className="ai-avatar">
                  <img src={IconLogo} alt="AI" />
                </div>
                <div className="welcome-message">
                  <h2>欢迎使用 AI Cube</h2>
                  <p>我是您的智能助手，可以帮您：</p>
                  <ul>
                    <li>✨ 回答问题和解决疑惑</li>
                    <li>🎨 创作文章和生成图片</li>
                    <li>💡 提供建议和创意灵感</li>
                    <li>📚 学习和知识探索</li>
                  </ul>
                </div>
              </div>
            ) : (
              <ChatItem question={question} chatContent={chatContent} />
            )}
          </div>
          <div className="input-area">
            <div className="model-selector">
              <Radio.Group value={selectedModel} onChange={e => setSelectedModel(e.target.value)}>
                <Radio.Button value="doubao">豆包 AI</Radio.Button>
                <Radio.Button value="deepseek">Deepseek</Radio.Button>
                <Radio.Button value="doubao+deepseek">双模型</Radio.Button>
                <Radio.Button value="qianfan">千帆文生图</Radio.Button>
              </Radio.Group>
            </div>
            <InputBar model={selectedModel} />
          </div>
        </div>
      </div>
    </div>
  );
};
